<template>
  <div class="comment-demo-container">
    <!-- 演示标题和描述 -->
    <div class="demo-header mb-8">
      <h1 class="text-3xl font-bold text-base-content mb-4">Comment 插槽演示</h1>
      <p class="text-lg text-base-content/70 mb-6">{{ currentDescription }}</p>

      <!-- 演示类型选择器 -->
      <div class="demo-selector mb-6">
        <div class="flex flex-wrap gap-2">
          <button
            v-for="config in demoConfigs"
            :key="config.id"
            @click="activeDemo = config.id"
            :class="['btn btn-sm', activeDemo === config.id ? 'btn-primary' : 'btn-outline']"
          >
            {{ config.name }}
          </button>
        </div>
      </div>
    </div>

    <!-- 演示内容 -->
    <div class="demo-content">
      <CodeDemo
        v-for="config in demoConfigs"
        :key="config.id"
        v-show="activeDemo === config.id"
        :title="config.name"
        :description="currentDescription"
        :template="templateCode"
        :script="scriptCode"
        :style="styleCode"
        language="vue"
        :preview-height="'auto'"
        :code-height="'600px'"
        :show-code="true"
        :show-preview="true"
      >
        <template #preview>
          <!-- 使用Vue组件 -->
          <component :is="currentExampleComponent" />
        </template>
      </CodeDemo>
    </div>

    <!-- 组件文档 -->
    <div class="component-docs-section mt-12">
      <h2 class="text-2xl font-bold text-base-content mb-6 text-center">组件文档</h2>
      <ComponentDocs :props="commentItemProps" :emits="commentItemEmits" />
    </div>
  </div>
</template>

<script setup lang="ts" name="CommentDemoPage">
import { ref, computed, watch } from 'vue'
import CodeDemo from '@/components/common/CodeDemo/index.vue'
import ComponentDocs from './ComponentDocs.vue'
import { commentItemProps, commentItemEmits } from './componentDocs'
// 插槽示例
import AvatarSlotExample from './examples/AvatarSlotExample.vue'
import AuthorSlotExample from './examples/AuthorSlotExample.vue'
import BadgeSlotExample from './examples/BadgeSlotExample.vue'
import TimestampSlotExample from './examples/TimestampSlotExample.vue'
import MoreActionsSlotExample from './examples/MoreActionsSlotExample.vue'
import ContentSlotExample from './examples/ContentSlotExample.vue'
import ActionsSlotExample from './examples/ActionsSlotExample.vue'
import ReplyFormSlotExample from './examples/ReplyFormSlotExample.vue'
import RepliesSlotExample from './examples/RepliesSlotExample.vue'
import ReplyAvatarSlotExample from './examples/ReplyAvatarSlotExample.vue'
import TimeFormatExample from './examples/TimeFormatExample.vue'
import CustomizationExample from './examples/CustomizationExample.vue'
import SlotCustomizationExample from './examples/SlotCustomizationExample.vue'

// 演示类型定义
type DemoType =
  | 'avatar-slot'
  | 'author-slot'
  | 'badge-slot'
  | 'timestamp-slot'
  | 'more-actions-slot'
  | 'content-slot'
  | 'actions-slot'
  | 'reply-form-slot'
  | 'replies-slot'
  | 'reply-avatar-slot'
  | 'time-format'
  | 'customization'
  | 'slot-customization'

// 演示配置
const demoConfigs = [
  { id: 'avatar-slot' as DemoType, name: '头像插槽' },
  { id: 'author-slot' as DemoType, name: '作者插槽' },
  { id: 'badge-slot' as DemoType, name: '徽章插槽' },
  { id: 'timestamp-slot' as DemoType, name: '时间戳插槽' },
  { id: 'more-actions-slot' as DemoType, name: '更多操作插槽' },
  { id: 'content-slot' as DemoType, name: '内容插槽' },
  { id: 'actions-slot' as DemoType, name: '操作按钮插槽' },
  { id: 'reply-form-slot' as DemoType, name: '回复表单插槽' },
  { id: 'replies-slot' as DemoType, name: '回复列表插槽' },
  { id: 'reply-avatar-slot' as DemoType, name: '回复头像插槽' },
  { id: 'time-format' as DemoType, name: '时间格式化' },
  { id: 'customization' as DemoType, name: '高度自定义' },
  { id: 'slot-customization' as DemoType, name: '插槽自定义' },
]

// 当前激活的演示
const activeDemo = ref<DemoType>('avatar-slot')

// 示例组件映射
const exampleComponents = {
  'avatar-slot': AvatarSlotExample,
  'author-slot': AuthorSlotExample,
  'badge-slot': BadgeSlotExample,
  'timestamp-slot': TimestampSlotExample,
  'more-actions-slot': MoreActionsSlotExample,
  'content-slot': ContentSlotExample,
  'actions-slot': ActionsSlotExample,
  'reply-form-slot': ReplyFormSlotExample,
  'replies-slot': RepliesSlotExample,
  'reply-avatar-slot': ReplyAvatarSlotExample,
  'time-format': TimeFormatExample,
  customization: CustomizationExample,
  'slot-customization': SlotCustomizationExample,
}

// 获取当前示例组件
const currentExampleComponent = computed(() => {
  return exampleComponents[activeDemo.value] || AvatarSlotExample
})

// 当前演示的描述
const currentDescription = computed(() => {
  const descriptions = {
    'avatar-slot': '自定义头像插槽，展示头像的自定义样式和交互效果',
    'author-slot': '自定义作者信息插槽，展示作者名的自定义样式和徽章',
    'badge-slot': '自定义徽章插槽，展示用户徽章的多种样式',
    'timestamp-slot': '自定义时间戳插槽，展示时间显示的自定义样式',
    'more-actions-slot': '自定义更多操作插槽，展示操作菜单的自定义选项',
    'content-slot': '自定义内容插槽，展示评论内容的自定义样式和统计',
    'actions-slot': '自定义操作按钮插槽，展示操作按钮的自定义样式',
    'reply-form-slot': '自定义回复表单插槽，展示回复表单的自定义功能',
    'replies-slot': '自定义回复列表插槽，展示回复列表的自定义布局',
    'reply-avatar-slot': '自定义回复头像插槽，展示回复头像的自定义样式',
    'time-format': '时间格式化功能，展示多种时间显示格式和自定义格式化函数',
    customization: '高度自定义化功能，展示样式预设、布局、卡片样式等配置选项',
    'slot-customization': '插槽自定义功能，展示完全自定义组件各个部分的强大能力',
  }
  return descriptions[activeDemo.value]
})

// 代码内容
const templateCode = ref('')
const scriptCode = ref('')
const styleCode = ref('')

// 获取Vue文件代码
const getVueFileCode = async (demoType: DemoType) => {
  try {
    const componentMap = {
      'avatar-slot': 'AvatarSlotExample',
      'author-slot': 'AuthorSlotExample',
      'badge-slot': 'BadgeSlotExample',
      'timestamp-slot': 'TimestampSlotExample',
      'more-actions-slot': 'MoreActionsSlotExample',
      'content-slot': 'ContentSlotExample',
      'actions-slot': 'ActionsSlotExample',
      'reply-form-slot': 'ReplyFormSlotExample',
      'replies-slot': 'RepliesSlotExample',
      'reply-avatar-slot': 'ReplyAvatarSlotExample',
      'time-format': 'TimeFormatExample',
      customization: 'CustomizationExample',
      'slot-customization': 'SlotCustomizationExample',
    }

    const componentName = componentMap[demoType]
    if (!componentName) return { template: '', script: '', style: '' }

    // 动态导入Vue文件内容
    const vueModule = await import(`./examples/${componentName}.vue?raw`)
    const vueContent = vueModule.default

    // 解析Vue文件内容
    const templateMatch = vueContent.match(/<template>([\s\S]*?)<\/template>/)
    const scriptMatch = vueContent.match(/<script setup lang="ts">([\s\S]*?)<\/script>/)
    const styleMatch = vueContent.match(/<style scoped>([\s\S]*?)<\/style>/)

    return {
      template: templateMatch ? templateMatch[1].trim() : '',
      script: scriptMatch ? scriptMatch[1].trim() : '',
      style: styleMatch ? styleMatch[1].trim() : '',
    }
  } catch (error) {
    console.error('读取Vue文件失败:', error)
    return { template: '', script: '', style: '' }
  }
}

// 监听演示类型变化，更新代码内容
watch(
  activeDemo,
  async (newDemo) => {
    const codes = await getVueFileCode(newDemo)
    templateCode.value = codes.template
    scriptCode.value = codes.script
    styleCode.value = codes.style
  },
  { immediate: true },
)
</script>

<style scoped>
.comment-demo-container {
  @apply max-w-6xl mx-auto p-6;
}

.demo-header {
  @apply text-center;
}

.demo-selector {
  @apply flex justify-center;
}

.demo-content {
  @apply space-y-8;
}
</style>
